// 导航栏滚动效果
window.addEventListener('scroll', function() {
  const navbar = document.getElementById('navbar');
  if (window.scrollY > 20) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

// 用户菜单切换
const userMenuBtn = document.getElementById('userMenuBtn');
const userMenu = document.getElementById('userMenu');

userMenuBtn.addEventListener('click', function() {
  userMenu.classList.toggle('hidden');
});

// 移动端菜单切换
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

mobileMenuBtn.addEventListener('click', function() {
  mobileMenu.classList.toggle('hidden');
});

// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', function(event) {
  if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
    userMenu.classList.add('hidden');
  }
  
  if (!mobileMenuBtn.contains(event.target) && !mobileMenu.contains(event.target)) {
    mobileMenu.classList.add('hidden');
  }
});

// 编辑个人信息模态框
const editProfileBtn = document.getElementById('editProfileBtn');
const editProfileModal = document.getElementById('editProfileModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const cancelEditBtn = document.getElementById('cancelEditBtn');

function openModal() {
  editProfileModal.classList.remove('hidden');
  document.body.style.overflow = 'hidden'; // 防止背景滚动
  
  // 添加动画类
  const modalContent = editProfileModal.querySelector('div:first-child');
  modalContent.classList.add('modal-enter');
  setTimeout(() => {
    modalContent.classList.add('modal-enter-active');
  }, 10);
}

function closeModal() {
  const modalContent = editProfileModal.querySelector('div:first-child');
  modalContent.classList.remove('modal-enter-active');
  modalContent.classList.add('modal-exit');
  modalContent.classList.add('modal-exit-active');
  
  setTimeout(() => {
    editProfileModal.classList.add('hidden');
    modalContent.classList.remove('modal-enter', 'modal-exit', 'modal-exit-active');
    document.body.style.overflow = ''; // 恢复背景滚动
  }, 300);
}

editProfileBtn.addEventListener('click', openModal);
closeModalBtn.addEventListener('click', closeModal);
cancelEditBtn.addEventListener('click', closeModal);

// 点击模态框外部关闭模态框
editProfileModal.addEventListener('click', function(event) {
  if (event.target === editProfileModal) {
    closeModal();
  }
});

// 表单提交
const editProfileForm = document.getElementById('editProfileForm');
editProfileForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 这里可以添加表单验证和提交逻辑
  alert('个人信息已保存！');
  closeModal();
});

// 为所有卡片添加动画效果
document.addEventListener('DOMContentLoaded', function() {
  const cards = document.querySelectorAll('.transform');
  cards.forEach((card, index) => {
    setTimeout(() => {
      card.classList.add('animate-fade-in');
    }, 100 * index);
  });
});
    